// full-screen-relative
@mixin full-screen-relative {
  box-sizing: border-box;
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

//vh转换
@mixin to-vh($px) {
}

// 主要页面样式
@mixin main-bg {
  background: linear-gradient(#44a8fc, #133ab6);
  height: 100vh;
  width: 100vw;
}

// flex
@mixin flex(
  $justify-content: flex-start,
  $align-items: flex-start,
  $flex-direction: row
) {
  display: flex;
  justify-content: $justify-content;
  align-items: $align-items;
  flex-direction: $flex-direction;
}

// ellipsis
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 单边0.5px边框
@mixin single-light-border($direction, $color: #e5e5e5) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    @if $direction == "top" {
      width: 200%;
      height: 1px;
      top: 0;
      left: 0;
    }

    @if $direction == "bottom" {
      width: 200%;
      height: 1px;
      bottom: 0;
      left: 0;
    }

    @if $direction == "left" {
      width: 1px;
      height: 200%;
      left: 0;
      top: 0;
    }

    @if $direction == "right" {
      width: 1px;
      height: 200%;
      right: 0;
      top: 0;
    }

    background-color: $color;
    box-sizing: border-box;
    transform: scale(0.5, 0.5);
    transform-origin: 0 0;
  }
}

@mixin full-light-border {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $color-border;
    transform-origin: 0 0;
    transform: scale(0.5);
  }
}

@mixin card-container {
  margin: $regular-margin;
  background-color: #fff;
  padding: $inset-padding;
  border-radius: $default-corner;
  font-size: $font-size-normal;
}
